<template>
    <div class="homeWrap">
        <el-button @click="addOrder" type="danger" class="addbutton">添加记录</el-button>
        <el-table :data="tableData" height="95%" style="width: 99%" class="whTable">
            <el-table-column min-width="108" prop="date" label="订单时间" />
            <el-table-column prop="name" label="商品名称"  />
            <el-table-column prop="price" label="商品售价" />
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column prop="address" label="买家地址" />
            <el-table-column prop="finish" label="是否已完成订单">
                <template #default="scope">
                    <el-radio-group v-model="scope.row.finish" @change='changefinish(scope.row)'>
                        <el-radio :label="'1'">已完成</el-radio>
                        <el-radio :label="'0'">未完成</el-radio>
                    </el-radio-group>
                </template>
            </el-table-column>
            <el-table-column  prop="phone"  >
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope, scope.row)"
                    >编辑</el-button
                    >
                    <el-popconfirm 
                    title="确认删除吗"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                            size="small"
                            type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogFormVisible" title="添加订单记录">
            <el-form>
                <el-form-item label="订单时间:" >
                    <el-date-picker
                        v-model="addobj.date"
                        type="date"
                        placeholder="选择日期"
                        :disabled-date="disabledDate"
                        :shortcuts="shortcuts"
                        value-format="YYYY-MM-DD"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商品名称:" >
                    <el-input v-model="addobj.name" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="商品售价:" >
                    <el-input v-model="addobj.price" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="联系方式:" >
                    <el-input v-model="addobj.phone" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="买家地址:" >
                    <el-input v-model="addobj.address" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="是否完成:" >
                    <el-input v-model="addobj.finish" placeholder="请输入" ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addIntodata"
                    >确认添加</el-button
                    >
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogEditVisible" title="修改订单记录">
            <el-form>
                <el-form-item label="订单时间:" >
                    <el-date-picker
                        v-model="Editobj.date"
                        type="date"
                        placeholder="选择日期"
                        :disabled-date="disabledDate"
                        :shortcuts="shortcuts"
                        value-format="YYYY-MM-DD"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商品名称:" >
                    <el-input v-model="Editobj.name" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="商品售价:" >
                    <el-input v-model="Editobj.price" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="联系方式:" >
                    <el-input v-model="Editobj.phone" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="买家地址:" >
                    <el-input v-model="Editobj.address" placeholder="请输入" ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogEditVisible = false">取消</el-button>
                    <el-button type="primary" @click="changedata"
                    >确认修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script lang='ts'>
import { onMounted, reactive,ref, toRaw,} from 'vue-demi'
import {uuid,formateTime, successTip,BASE_URL,errorTip} from '../utils/tools'
import axios from 'axios'
import { useStore } from 'vuex'
import router from '@/router'




export default {
    setup(){
        let store = useStore();
        const token = localStorage.getItem('TOKEN');
        const tableData =ref([{uuid:'',date:'',name:'',price:'',phone:'',address:'',finish:''}])
        //获取数据
        async function getOrderData(){
            try {
                const res = await axios.get(`${BASE_URL}/data/order`, {
                    headers: {
                        'Authorization': 'Bearer '+ token,
                    },
                    params:{
                        userId:store.getters.getUserId
                    }
                })
                if(res.data.status==0){
                    let data = res.data.data;
                    tableData.value = data;
                }
            } catch (error) {
                console.log("error")
            }
        }
        //修改数据
        async function changedata(){
            try {
                const res = await axios.post(`${BASE_URL}/data/changeOrder`,Editobj.value ,{
                    headers: {
                        'Authorization': 'Bearer '+ store.getters.getToken,
                    },
                })
                if(res.data.status==0){
                    successTip('修改成功')
                    getOrderData()
                    dialogEditVisible.value = false
                }else{
                    errorTip('修改失败')
                }
            } catch (error) {
                console.log("error")
            }
        }
        onMounted(():void=>{
            
            getOrderData()
        })
        let dialogFormVisible = ref(false)
        function addOrder(){
            dialogFormVisible.value = true
        }
        let addobj = ref({uuid:'',date:'',name:'',price:'',phone:'',address:'',finish:''})
        //添加框里的相关时间参数
        const shortcuts = [
            {
                text: '今天',
                value: new Date(),
            },
            {
                text: '昨天',
                value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                return date
                },
            },
            {
                text: '一周前',
                value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                return date
                },
            },
        ]
        const disabledDate = (time: Date) => {
        return time.getTime() > Date.now()
        }
        //添加数据
        async function addIntodata(){
            addobj.value.date = formateTime(addobj.value.date)
            addobj.value.uuid = uuid()
            try {
                const res = await axios.post(`${BASE_URL}/data/Order`,addobj.value,{
                    headers: {
                        'Authorization': 'Bearer '+ store.getters.getToken,
                    },
                })
                if(res.data.status==0){
                    successTip('添加成功');
                    tableData.value.push(addobj.value)
                    addobj.value = {uuid:'',date:'',name:'',price:'',phone:'',address:'',finish:''}
                }else{
                    errorTip('添加失败')
                }
            } catch (error) {
                console.log("error")
            }
        }

        //编辑框是否可见
        let dialogEditVisible = ref(false)
        let Editobj = ref({uuid:'',date:'',name:'',price:'',phone:'',address:'',finish:''})
        //编辑
        function handleEdit(scope:any,row:any){
            Editobj.value = JSON.parse(JSON.stringify(toRaw(row)))            
            dialogEditVisible.value = true
        } 
        //删除
        async function handleDelete(scope:any,row:any){
            try {
                const res = await axios.get(`${BASE_URL}/data/deleteOrder`, {
                    headers: {
                        'Authorization': 'Bearer '+ store.getters.getToken,
                    },
                    params:{
                        uuid:row.uuid
                    }
                })
                if(res.data.status==0){
                    successTip('删除成功');
                    for(let i=0;i<tableData.value.length;i++){
                        if(tableData.value[i]!=undefined){
                            if(tableData.value[i].uuid == row.uuid){
                                delete tableData.value[i]
                                break;
                            }
                        }
                    }
                }else{
                    errorTip('删除失败')
                }
            } catch (error) {
                console.log("error")
            }
        }
        //修改是否完成
        async function changefinish(row:any){
            if(row.finish=='0'){
                row.finish=='1'
            }else{
                row.finish == '0'
            }
            try {
                const res = await axios.post(`${BASE_URL}/data/changeOrder`,row ,{
                    headers: {
                        'Authorization': 'Bearer '+ store.getters.getToken,
                    },
                })
                if(res.data.status==0){
                    successTip('修改成功')
                    getOrderData()
                }else{
                    errorTip('修改失败')
                }
            } catch (error) {
                console.log("error")
            }
        }

        return{
            tableData,
            addobj,
            shortcuts,
            disabledDate,
            addOrder,
            dialogFormVisible,
            addIntodata,
            dialogEditVisible,
            handleEdit,
            handleDelete,
            Editobj,
            changedata,
            changefinish,
        }
    }
}
</script>

<style lang='less' scoped>
    .homeWrap{
        background-color: rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 94vh;
        position: relative;
        overflow: hidden;
        transition: transform 0.5s;
        /deep/.addbutton{
            width: 80px;
            height: 35px;
            position: absolute;
            right: 20px;
            top:5px;
            z-index: 10;
        }
        /deep/.whTable{
            margin: 45px auto;
            border: 1px solid rgb(207, 207, 207);
            box-shadow: rgb(0 0 0 / 20%) 1px 1px 3px;
            border-radius: 5px;
        }
        /deep/.el-table{
            tr{
                background: aliceblue;
            }
            th.el-table__cell {
                font-weight: bold;
                background-color: #f8bc3391;
                height: 55px;
                color: #000;
                text-align: center;
            }
            td.el-table__cell{
                text-align: center;
            }
            
            .el-table__body tr:hover>td{
                background-color: rgba(155,195,232, 0.5) !important;
            }
            
        }
        /deep/.el-form-item--default .el-form-item__label {
            line-height: 45px;
        }
        /deep/.el-input__inner {
            height: 45px;
            width: 380px;
        }
        /deep/.el-dialog {
            --el-dialog-width: 35%;
        }
    }
    @media (max-width:980px) {
        /deep/.el-dialog{
            width: 88%;
            .el-input__inner {
                height: 45px;
                width: 180px;
            }
        }
        /deep/.el-button--small{
            margin-left: 12px;
        }
    }
</style>